<template>
	<view class="container">
		<!-- 多个登录方式 -->
		<view class="container-item">
			<image class="container-item-img" :src="imgSrc" mode="" lazy-load="false">
			</image>
			<view class="container-item-title">
				登录后可同步数据,可享受更多功能
			</view>
			<view v-show="active == 0" class="container-item-button">
				<u-button text="手机号快捷登录" shape="circle" size="normal" type="success" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"></u-button>
				<view class="container-item-tip">
					<tool-tip :content="content" left="100rpx" :show="quickInfo.tooltipQuick">
						<radio-group>
							<radio color="red" class="container-item-radio" :checked="quickInfo.isCheckedQuick"
								@click="radioClickQuick">
							</radio>
							<text class="container-item-protocol">
								快捷登录请先阅读,并勾选协议
								<text class="container-item-protocol-text">
									《用户协议》
								</text>
								<text class="container-item-protocol-text">
									《隐私政策》
								</text>
							</text>
						</radio-group>
					</tool-tip>
				</view>
			</view>
			<view v-show="active == 1" class="container-item-button">
				<view class="container-user-form">
					<u--form labelPosition="left" :model="phoneForm" ref="phoneForm" :rules="phoneRules">
						<u-form-item prop="phoneNumber" borderBottom>
							<u-input v-model="phoneForm.phoneNumber" border="none" placeholder="请输入手机号" clearable>
								<template slot="prefix">
									<text class="container-qu-hao"> +86 </text>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item prop="code" borderBottom>
							<u-input v-model="phoneForm.code" border="none" placeholder="请输入验证码" clearable>
								<template slot="suffix">
									<view style="padding:0 20rpx;">
										<u-button :text="codeText" shape="circle" size="small" type="success"
											@click="getCode"></u-button>
									</view>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
				</view>
				<u-button text="提交" shape="circle" size="normal" type="error" @click="phoneSubmit"></u-button>
				<view class="container-item-tip">
					<tool-tip :content="content" left="100rpx" :show="phoneInfo.tooltipPhone">
						<radio-group>
							<radio color="red" class="container-item-radio" :checked="phoneInfo.isCheckedPhone"
								@click="radioClickPhone">
							</radio>
							<text class="container-item-protocol">
								若手机号未注册，将自动注册,注册即代表同意
								<text class="container-item-protocol-text">
									《用户协议》
								</text>
								<text class="container-item-protocol-text">
									《隐私政策》
								</text>
							</text>
						</radio-group>
					</tool-tip>
				</view>
			</view>
			<view v-show="active == 2" class="container-item-button">
				<view class="container-user-form">
					<u--form labelPosition="left" :model="userForm" ref="userForm" :rules="rules">
						<u-form-item prop="account" borderBottom>
							<u-input v-model="userForm.account" border="none" placeholder="请输入账号/手机号/邮箱"
								clearable></u-input>
						</u-form-item>
						<u-form-item prop="password" borderBottom>
							<u-input v-if="passwordType" v-model="userForm.password" border="none" placeholder="请输入登录密码"
								clearable>
								<template slot="suffix">
									<view style="padding:0 20rpx;">
										<view class="iconfont ic-yanjing_xianshi_o" @click="eyeClick">
										</view>
									</view>
								</template>
							</u-input>
							<u-input v-else v-model="userForm.password" border="none" type="password" placeholder="请输入登录密码"
								clearable>
								<template slot="suffix">
									<view style="padding:0 20rpx;">
										<view class="iconfont ic-yanjing_yincang_o" @click="eyeClick">
										</view>
									</view>
								</template>
							</u-input>
						</u-form-item>
					</u--form>
				</view>
				<u-button text="登录" shape="circle" size="normal" type="error" @click="userSubmit"></u-button>
				<view class="container-item-tip">
					<tool-tip :content="content" left="100rpx" :show="userInfo.tooltipUser">
						<radio-group>
							<radio color="red" class="container-item-radio" :checked="userInfo.isCheckedUser"
								@click="radioClickUser">
							</radio>
							<text class="container-item-protocol">
								请仔细阅读相关协议,注册即代表同意
								<text class="container-item-protocol-text">
									《用户协议》
								</text>
								<text class="container-item-protocol-text">
									《隐私政策》
								</text>
							</text>
						</radio-group>
					</tool-tip>
				</view>
			</view>
		</view>
		<!-- 底部其它登录方式 -->
		<view class="container-footer">
			<u-divider text="其它登录方式"></u-divider>
			<view class="container-divider"></view>
			<view class="container-footer-content">
				<view v-show="quickMode" class="container-footer-item" @click="quickModeClick">
					<image class="container-footer-item-img" src="../static/kuaijie.png" mode="" lazy-load="false">
					</image>
					<view class="container-footer-item-title">
						快捷登录
					</view>
				</view>
				<view v-show="phoneMode" class="container-footer-item" @click="phoneModeClick">
					<image class="container-footer-item-img" src="../static/shouji.png" mode="" lazy-load="false">
					</image>
					<view class="container-footer-item-title">
						手机号
					</view>
				</view>
				<view v-show="userMode" class="container-footer-item" @click="userModeClick">
					<image class="container-footer-item-img" src="../static/zhanghao.png" mode="" lazy-load="false">
					</image>
					<view class="container-footer-item-title">
						账号密码
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAvatar } from "@/api/user/login";
import { checkPwd, checkPhone } from '@/utils/tools'
import ToolTip from "@/components/cusToolTip";
import { mapActions } from 'vuex'
export default {
	components: {
		ToolTip
	},
	data() {
		return {
			active: 0,
			imgSrc: "",
			content: "请先阅读,并勾选协议",
			passwordType: 'password',
			quickInfo: {
				tooltipQuick: false,
				isCheckedQuick: false,
				quickMode: true,
			},
			phoneInfo: {
				tooltipPhone: false,
				isCheckedPhone: false,
				phoneMode: false,
			},
			userInfo: {
				tooltipUser: false,
				isCheckedUser: false,
				userMode: false,
			},
			userForm: {
				account: "",
				password: "",
			},
			rules: {
				'account': [
					{
						type: 'string',
						required: true,
						message: "请输入账号",
						trigger: ['blur', 'change']
					},
				],
				'password': [
					{
						type: 'string',
						required: true,
						message: "请输入密码",
						trigger: ['change']
					},
					{
						// 自定义验证函数
						validator: (rule, value, callback) => {
							if (value.length < 6) {
								callback(new Error('密码长度不能小于6位'));
							} else if (!checkPwd(value)) {
								callback(new Error('密码长度不能小于6位且包含字母和数字'));
							} else {
								callback();
							}
						},
						message: '密码长度不能小于6位且包含字母和数字',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				],
			},
			codeText: '获取验证码',
			phoneForm: {
				account: "",
				password: "",
			},
			phoneRules: {
				'phoneNumber': [
					{
						type: 'string',
						required: true,
						message: "请输入手机号",
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数
						validator: (rule, value, callback) => {
							if (!checkPhone(value)) {
								callback(new Error('手机号格式不正确'));
							} else {
								callback();
							}
						},
						message: '手机号格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}
				],
				'code': [
					{
						type: 'string',
						required: true,
						message: "请输入验证码",
						trigger: ['change']
					},
				],
			},
		};
	},
	computed: {
		getIcon() {
			return this.passwordType == 'password' ? 'ic-yanjing_yincang_o' : 'ic-yanjing_xianshi_o'
		}
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.userForm.setRules(this.rules)
		this.$refs.phoneForm.setRules(this.phoneRules)
	},
	mounted() {
		this.$nextTick(() => {
			this.getAvatar();
		});
	},

	methods: {
		...mapActions({
			login: 'user/login'
		}),
		async getAvatar() {
			const { avatar } = await getAvatar({ type: 'json' });
			this.imgSrc = avatar;
		},
		radioClickQuick() {
			this.quickInfo.isCheckedQuick = !this.quickInfo.isCheckedQuick;
		},
		radioClickPhone() {
			this.phoneInfo.isCheckedPhone = !this.phoneInfo.isCheckedPhone;
		},
		radioClickUser() {
			this.userInfo.isCheckedUser = !this.userInfo.isCheckedUser;
		},
		async getPhoneNumber(e) {
			//获取手机号,只在微信认证了政府,企业,媒体,其他组织,学校,服务商,或新注册用户才能获取到,否则无权限
			console.log(e);
			uni.showToast({
				title: '获取手机号,只在微信认证了政府,企业,媒体,其他组织,学校,服务商,或新注册用户才能获取到,否则无权限',
				icon: 'none'
			})
			this.quickInfo.tooltipQuick = !this.quickInfo.isCheckedQuick
			if (this.quickInfo.tooltipQuick) return;
		},
		phoneSubmit() {
			this.phoneInfo.tooltipPhone = !this.phoneInfo.isCheckedPhone
			if (this.phoneInfo.tooltipPhone) return;
			this.$refs.phoneForm.validate().then(res => {
				// 功能待开发
				uni.showToast({
					title: '功能待开发',
					icon: 'none'
				})
			})
		},
		userSubmit() {
			this.userInfo.tooltipUser = !this.userInfo.isCheckedUser
			if (this.userInfo.tooltipUser) return;
			this.$refs.userForm.validate().then(res => {
				// 模拟登录,2秒后跳转,显示登录中动画,调用vuex登录接口
				uni.showLoading({
					title: '模拟登录中...',
					mask: true
				})
				this.login(this.userForm).then(res => {
					console.log(res);
					uni.switchTab({
						url: '/pages/user/user',
					});
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			})
		},
		quickModeClick() {
			this.active = 0;
		},
		phoneModeClick() {
			this.quickMode = false;
			this.active = 1;
		},
		userModeClick() {
			this.quickMode = false;
			this.active = 2;
		},
		eyeClick() {
			this.passwordType = this.passwordType == 'password' ? '' : 'password'
		},
		getCode() {
			this.$refs.phoneForm.validateField('phoneNumber').then(res => {
				// 模拟获取验证码,2秒后跳转,显示登录中动画
				uni.showLoading({
					title: '模拟获取验证码中...',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '获取验证码成功',
						icon: 'none'
					})
					let time = 60
					let timer = setInterval(() => {
						time--
						this.codeText = time + ' s'
						if (time <= 0) {
							clearInterval(timer)
							this.codeText = '获取验证码'
						}
					}, 1000)
				}, 2000)
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background-color: #fff;

	&-item {
		width: 100%;
		padding-top: 100rpx;
		text-align: center;

		&-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}

		&-title {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #999;
		}

		&-tip {
			text-align: left;
			padding-top: 20rpx;
		}

		&-button {
			margin-top: 50rpx;
			padding: 0 50rpx;
		}

		&-protocol {
			font-size: 24rpx;
			color: #999;

			&-text {
				color: red;
			}
		}

		&-radio {
			transform: scale(0.7, 0.7);
		}
	}

	&-footer {
		position: fixed;
		bottom: 85rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		text-align: center;

		&-content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 10rpx;
		}

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;

			&-img {
				width: 50rpx;
				height: 50rpx;
			}

			&-title {
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	&-user-form {
		margin: 20rpx 0;
	}

	&-qu-hao {
		color: #444;
	}
}

// 修复表单组件提示信息位置
.container ::v-deep .u-form-item__body__right__message {
	text-align: left;
	margin-left: 0 !important;
}
</style>
